@use '../util';

.contextMenu {
	background-color: var(--last-fm-bg);
	color: var(--text);
	display: flex;

	.contextMenuItem {
		border: var(--interactable-border);
		flex-grow: 1;
		padding: 0.5em 0;
		position: relative;

		@supports #{util.$mobile-supports} {
			&.activeDialogButton {
				background-color: var(--always-last-fm-hover);
				color: var(--active-text);
			}
		}

		&.activeDialogButton::after {
			animation: 0.1s ease-in-out forwards show-tip;
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			border-top: 20px solid var(--context-bg);
			content: '';
			height: 0;
			left: 50%;
			position: absolute;
			top: -20px;
			transform: translateX(-50%) scaleY(0);
			transform-origin: center;
			width: 0;
		}
	}
}

.contextMenu,
.contextMenuDialog {
	border: var(--interactable-border);
	z-index: 1000000;

	// stylelint-disable-next-line no-duplicate-selectors
	& {
		/* avoid flickering on ios */
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
	}

	.contextMenuItem {
		background-color: transparent;
		color: var(--text);
		cursor: pointer;
		display: flex;
		flex-direction: column;
		font-size: 1em;
		justify-content: center;

		& > * {
			cursor: pointer;
			display: block;
			margin: 0 auto;
		}

		@supports not (#{util.$mobile-supports}) {
			&:hover {
				background-color: var(--always-last-fm-hover);
				color: var(--active-text);
			}
		}
	}
}

.contextMenuDialog {
	animation: 0s ease-in-out forwards hide;
	background-color: var(--context-bg);
	border-radius: 0.5em;
	color: var(--text);
	display: flex;
	flex-direction: column;
	min-width: 50vw;
	overflow: hidden;
	padding: 0;
	position: absolute;
	transform: translateY(calc(-100%)) scale(0);
	transform-origin: bottom center;

	&.leftDialog {
		margin-left: 20px;
		margin-right: auto;
		transform-origin: bottom left;
	}

	&.rightDialog {
		margin-left: auto;
		margin-right: 20px;
		transform-origin: bottom right;
	}

	// stylelint-disable-next-line no-duplicate-selectors
	& {
		/* avoid flickering on ios */
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
	}

	&.mountedAnimation {
		animation-duration: 0.1s;
	}

	&[open] {
		animation: 0.1s ease-in-out forwards show;
	}

	.contextMenuItem {
		border: none;
		padding: 1em;

		&:not(:last-child) {
			border-bottom: 1px solid var(--last-fm);
		}
	}
}

@keyframes show {
	0% {
		display: none;
		transform: translateY(calc(-100%)) scale(0);
	}

	1% {
		display: flex;
		transform: translateY(calc(-100%)) scale(0);
	}

	100% {
		display: flex;
		transform: translateY(calc(-100% - 20px)) scale(1);
	}
}

@keyframes hide {
	0% {
		display: flex;
		transform: translateY(calc(-100% - 20px)) scale(1);
	}

	99% {
		display: flex;
		transform: translateY(calc(-100%)) scale(0);
	}

	100% {
		display: none;
	}
}

@keyframes show-tip {
	from {
		transform: translateX(-50%) scaleY(0);
	}

	to {
		transform: translateX(-50%) scaleY(1);
	}
}
